Ext.onReady(function() {
			new Ext.Viewport({
						layout : "border",
						items : [{
									region : "north",
									height : 50,
									html : "<h1>环境爱上咖啡和点卡是非得失</h1>"
								}, {
									region : "south",
									height : 50,
									title : "底部面板"
								}, {
									region : "center",
									title : "中央面板",
									items:[grid_panel]
								}, {
									region : "west",
									width : 200,
									title : "菜单",
									collapsible : true,
									items : [treePanelApp]
								}, {
									region : "east",
									width : 100,
									title : "右边面板"
								}]
					});
		});

var store = Ext.create('Ext.data.TreeStore', {
			root : {
				expanded : true,
				children : [{
							text : '应用程序管理',
							expanded : true,
							children : [{
										text : '应用程序管理',
										id : 'appManage',
										leaf : true,
										listeners : {
											itemclick : function(node, event) {
												if (node.leaf) {// 判断是不是叶子节点
													alert(node.attributes.id);
												}
											}
										}

									}]
						}, {
							text : '页面配置管理',
							expanded : true,
							children : [{
										text : '页面配置管理',
										id : 'configManage',
										leaf : true
									}, {
										text : ' 页面按钮配置',
										id : 'buttonManage',
										leaf : true
									}]
						}, {
							text : '用户管理',
							expanded : true,
							children : [{
										text : '用户管理',
										id : 'userManage',
										leaf : true
									}, {
										text : '权限管理',
										id : 'rowManage',
										leaf : true
									}]
						}, {
							text : '任务管理',
							expanded : true,
							children : [{
										text : '任务管理',
										id : 'taskMange',
										leaf : true
									}]
						}]
			}
		});

function tree_event(node, event) {
	var id = event.data.id;
	Ext.Msg.show({
				title : '提示',
				msg : '你单击了' + id
			});
};
var treePanelApp = new Ext.tree.Panel({
			id : 'tree-panel',
			border : false,
			autoHeight : true,
			autoScroll : true,
			width : 200,
			listeners : {
				itemclick : tree_event
			},
			rootVisible : false,
			store : store
		});

var grid_store = Ext.create('Ext.data.Store', {
			storeId : 'employeeStore',
			fields : ['firstname', 'lastname', 'seniority', 'dep', 'hired'],
			data : [{
						firstname : "Michael",
						lastname : "Scott"
					}, {
						firstname : "Dwight",
						lastname : "Schrute"
					}, {
						firstname : "Jim",
						lastname : "Halpert"
					}, {
						firstname : "Kevin",
						lastname : "Malone"
					}, {
						firstname : "Angela",
						lastname : "Martin"
					}]
		});

var grid_panel = Ext.create('Ext.grid.Panel', {
	title : 'Action Column Demo',
	store : grid_store,
	columns : [{
				text : 'First Name',
				dataIndex : 'firstname'
			}, {
				text : 'Last Name',
				dataIndex : 'lastname'
			}, {
				xtype : 'actioncolumn',
				width : 50,
				items : [{
							icon : 'extjs/examples/shared/icons/fam/cog_edit.png', // Use
							// a
							// URL
							// in
							// the
							// icon
							// config
							tooltip : 'Edit',
							handler : function(grid, rowIndex, colIndex) {
								var rec = grid.getStore().getAt(rowIndex);
								alert("Edit " + rec.get('firstname'));
							}
						}, {
							icon : 'extjs/examples/restful/images/delete.png',
							tooltip : 'Delete',
							handler : function(grid, rowIndex, colIndex) {
								var rec = grid.getStore().getAt(rowIndex);
								alert("Terminate " + rec.get('firstname'));
							}
						}]
			}],
	width : 250
});